<template>
    <div class="chongzhi">
        <div class="recharge">
            <div class="czyue">
                <input v-model.trim="money" type="number" placeholder="请输入充值金额">
            </div>
            <ul class="rechargeBtn">
                <li :class="{active: 0 === ins}" @click="active(0)">
                    <span>管家费充值</span>
                </li>
                <li :class="{active: 1 === ins}" @click="active(1)">
                    <span>账户充值</span>
                </li>
            </ul>
        </div>
        <div class="rechargeContent">
            <p class="rechargeNotice">*管家费借鉴于宽带费标准支付，客服热线：<a href="tel:0512-36919119">0512-36919119</a></p>
            <ul class="rechargeAddress" v-if="recharge">
                
                <li :class="{active: index.manageId === insadd}" v-for="index in rechargeData" :key='index.id' @click="activeAdd(index.manageId)">
                    <p>管家服务地址：{{ index.address }} <br> <small style="color:#ff5622;">{{ notice(index) }}</small></p>
                    <div>
                        <i class="iconfont icon-duigou"></i>
                    </div>
                </li>
                <li :class="{ active: -1 === insadd }" @click="activeAdd(-1)">
                    <textarea v-model.trim="address" name="" placeholder="添加新管家服务地址" id="" cols="40" rows="4"></textarea>
                    <div>
                        <i class="iconfont icon-duigou"></i>
                    </div>
                </li>
            </ul>
            <div class="rechargeTea"></div> 
        </div>

        <div class="zhifutit">
            <h3>支付方式</h3>
        </div>

         <div class="zhifu-box" v-for="(item,index) in zhifu" :key="item.id">
            <i class="iconfont icon-weixinzhifu"></i>
            <input v-model="zhifuType" :value="item.value" class="input-zhifu" :checked='item.isChecked'  @click="check(index)" type="radio" style="-webkit-appearance: none;">
            {{item.label}}
        </div>

        <div class="chongBtn">
            <a class="czBtn" @click="rechargeFun(ins)">充值</a>
        </div>

    </div>
</template>

<script>
import payWeiXin from '@/assets/js/payWeiXin'
import { mapState,mapActions } from 'vuex'
import { MessageBox } from 'mint-ui';
export default {
    created(){
        this.getUserInfo().then( () => {
            if(this.$route.path === '/register'){
                return;
            }else{
                this.getRecharge();
            }
        })
    },
    data() {
        return{
            successMessage:'充值成功',
            address:'',
            money:'',
            zhifuType: '微信支付',
            ins: 0,
            insadd: -1,
            zhifu:[
            {
                id: 2,
                label: '微信支付',
                value:'微信支付',
                isChecked: true
            }]
        }
    },
    computed: {
        notice(){
            return (item) => {
                if(item.isManage == 1){return `您好,您的管家服务到期时间: ${ item.endTime }`}
                if(item.isManage == 0){return `该地址未注册管家服务，如有疑问请联系管家客服。`}
                if(item.isManage == 2){return `您好，管家会员已过期。过期时间 ${ item.endTime }。续费请充值。`}
            }
        },
        recharge () {
            if (this.ins === 0) {
                return true
            } else {
                return false
            }
        },
        ...mapState({
            rechargeAddress: ( {personModules} ) => personModules.rechargeAddress,
            rechargeData:state => state.personModules.rechargeData
        })
    },
    methods:{
        ...mapActions({
            getUserInfo:'personModules/getUserInfo',
            getRecharge:'personModules/getRecharge',
            rechargeFun:'personModules/rechargeFun'
        }),
        check () {
            this.zhifu.forEach((item) => {
                item.isChecked = !item.isChecked
            })
        },
        active (i) {
            this.ins = i;
        },
        activeAdd (manageId) {
            this.insadd = manageId;
        },
        rechargeFun(type){
            let params ={}
            if(this.money == ''){MessageBox('提示', '请输入充值金额'); return;}
            this.money = Math.floor(Number(this.money)*100)/100;
            if(this.money == 0){MessageBox('提示', '请输入有效的充值金额'); return;}
            if(this.money)
            if(type===0){
                if(this.insadd === -1){
                    if(this.address == ''){MessageBox('提示', '请输入地址'); return;}
                    params = {
                        money:this.money,
                        payChannel:this.zhifu[0].id,
                        snsType:1,
                        address:this.address
                    }
                }else{
                    params = {
                        money:this.money,
                        payChannel:this.zhifu[0].id,//支付渠道 1 支付宝 2 微信
                        snsType:1,//1 微信公众号 2 小程序 3 app
                        manageId:this.insadd
                    }
                }
                //调用微信支付
                this.$newHttp.post('/managePay/buy',params)
                    .then(res => {
                        payWeiXin(res.data);
                        // MessageBox.alert(this.successMessage,'提示');
                    })
                    .catch(err => {console.log(err)});
            }else if(type===1){
                params ={
                    money:this.money,
                    payChannel:this.zhifu[0].id,
                    snsType:1,
                }
                //调用微信支付
                this.$newHttp.post('/rechargeRecord/buy',params)
                    .then(res => {
                        payWeiXin(res.data);
                        // MessageBox.alert(this.successMessage,'提示');
                    })

                    .catch(err => {console.log(err)});
            }else{
                MessageBox('提示', '错误'); return;
            }
            // this.$router.push('/person');
        }
    }
}
</script>

<style lang="scss" scoped>
@import "../../assets/style/order.scss";
.zhifutit{
    width: 100%;
}
</style>
